<%@ page import="com.social.model.User" %>
<%@ page import="com.social.model.Friend" %>
<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - SocialApp</title>
    <!-- 统一引入登录页的样式表 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入Font Awesome图标库 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 首页专属样式（与登录页风格统一） -->
    <style>
        /* 容器布局：和登录页一致的居中、卡片式设计 */
        .home-container {
            max-width: 500px;
            margin: 48px auto;
        }
        .card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            padding: 32px;
            margin-bottom: 32px;
        }
        /* 用户信息区 */
        .user-section {
            display: flex;
            align-items: center;
        }
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 24px;
            border: 2px solid #fff;
            box-shadow: 0 0 8px rgba(0,0,0,0.15);
        }
        .welcome-text h2 {
            margin: 0;
            font-size: 22px;
            color: #18c677;
        }
        .welcome-text p {
            margin: 8px 0 0;
            color: #795ed7;
            font-size: 15px;
        }
        /* 功能按钮区：网格布局，和登录页社交按钮风格统一 */
        .action-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-top: 24px;
        }
        .action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            background: #54babd; /* 继承登录页主色 */
            color: #fff;
            border-radius: 6px;
            text-decoration: none;
            transition: background 0.3s;
            font-size: 15px;
        }
        .action-btn i {
            margin-right: 8px;
        }
        .action-btn:hover {
            background: #227449; /* 加深主色，和登录页按钮 hover 统一 */
        }
        /* 禁用状态（如未实现的功能） */
        .disabled-btn {
            background: #ccc !important;
            cursor: not-allowed;
        }
        .logo{
            color: #34c6a8;
        }
        .btn{
            background-color: #34c6a8;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            text-decoration: none;
            display: inline-block;
            transition: background 0.3s;
        }
        .btn:hover{
            background-color: #227449;
        }
        /* 好友推荐模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .tab-header {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }
        .tab-btn {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: border-color 0.3s;
        }
        .tab-btn.active {
            border-bottom-color: #34c6a8;
            color: #34c6a8;
            font-weight: bold;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .search-container {
            margin-bottom: 15px;
        }
        .search-input {
            width: 70%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 5px;
        }
        .search-btn {
            padding: 8px 16px;
            background-color: #34c6a8;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .search-btn:hover {
            background-color: #227449;
        }
        .user-list {
            margin-top: 15px;
        }
        .user-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .user-item:last-child {
            border-bottom: none;
        }
        .user-item-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
        }
        .user-item-info {
            flex: 1;
        }
        .user-item-name {
            font-weight: bold;
        }
        .user-item-mutual {
            font-size: 12px;
            color: #666;
        }
        .add-friend-btn {
            padding: 6px 12px;
            background-color: #34c6a8;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .add-friend-btn:hover {
            background-color: #227449;
        }
        .add-friend-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
    </style>
</head>
<body>
<!-- 统一页头（和登录页完全一致） -->
<div class="header">
    <div class="container">
        <div class="logo">SocialApp</div>
    </div>
</div>

<div class="container home-container">
    <%
        User user = (User) session.getAttribute("user");
        if (user != null) {
    %>
    <!-- 用户信息卡片 -->
    <div class="card user-section">
        <img src="<%= user.getAvatar() %>" alt="用户头像" class="user-avatar">
        <div class="welcome-text">
            <h2>欢迎回来，<%= user.getNickname() %></h2>
            <p>探索社交圈，分享你的故事 </p>
        </div>
    </div>

    <!-- 功能按钮卡片 -->
    <div class="card">
        <h3 style="margin: 0 0 1rem; color: #269f62;">快捷功能</h3>
        <div class="action-grid">
            <a href="Upload_Log_Info" class="action-btn">
                <i class="fa fa-pencil-square-o"></i> 发布日志
            </a>
            <a href="userLogs.jsp" class="action-btn">
                <i class="fa fa-trash-o"></i> 删除日志
            </a>

            <a href="socialCircle.jsp" class="action-btn">
                <i class="fa fa-users"></i> 社交圈
            </a>
            <a href="/addFriend?friends=${user.friends}&userId=${user.id}" class="action-btn">
                <i class="fa fa-user-plus"></i> 添加好友
            </a>
            <a href="/myFriend?friends=${user.friends}&userId=${user.id}" class="action-btn">
                <i class="fa fa-user-plus"></i> 我的好友
            </a>
            <a href="logout.jsp" class="action-btn">
                <i class="fa fa-sign-out"></i> 退出登录
            </a>
        </div>
    </div>
    <% } else { %>
    <!-- 未登录提示（和登录页风格统一） -->
    <div class="card" style="text-align: center;">
        <p style="margin: 0 0 16px;">请先登录，开启社交之旅 </p>
        <a href="login.jsp" class="btn">立即登录</a>
    </div>
    <% } %>
</div>

<!-- 统一页尾（和登录页完全一致） -->
<div class="footer">
    <div class="container">
        <p>© 2025 SocialApp 版权所有</p>
    </div>
</div>

<!-- 添加好友模态框 -->
<div id="addFriendModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3 style="color: #34c6a8; margin-top: 0;">添加好友</h3>

        <div class="tab-header">
            <div class="tab-btn active" data-tab="search">搜索用户</div>
            <div class="tab-btn" data-tab="random">随机推荐</div>
            <div class="tab-btn" data-tab="mutual">共同好友推荐</div>
        </div>

        <div class="tab-content active" id="search-tab">
            <div class="search-container">
                <input type="text" id="searchInput" class="search-input" placeholder="输入用户昵称...">
                <button id="searchBtn" class="search-btn">搜索</button>
            </div>
            <div id="searchResults" class="user-list">
                <div class="loading">请输入昵称进行搜索</div>
            </div>
        </div>

        <div class="tab-content" id="random-tab">
            <div class="search-container">
                <button id="randomBtn" class="search-btn">获取推荐用户</button>
            </div>
            <div id="randomResults" class="user-list">
                <div class="loading">点击上方按钮获取推荐用户</div>
            </div>
        </div>

        <div class="tab-content" id="mutual-tab">
            <div class="search-container">
                <button id="mutualBtn" class="search-btn">获取共同好友推荐</button>
            </div>
            <div id="mutualResults" class="user-list">
                <div class="loading">点击上方按钮获取共同好友推荐</div>
            </div>
        </div>
    </div>
</div>

<script>
    // 获取DOM元素
    const addFriendBtn = document.getElementById('addFriendBtn');
    const addFriendModal = document.getElementById('addFriendModal');
    const closeBtn = document.querySelector('.close');
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    const searchBtn = document.getElementById('searchBtn');
    const searchInput = document.getElementById('searchInput');
    const randomBtn = document.getElementById('randomBtn');
    const mutualBtn = document.getElementById('mutualBtn');

    // 打开模态框
    addFriendBtn.addEventListener('click', () => {
        addFriendModal.style.display = 'block';
    });

    // 关闭模态框
    closeBtn.addEventListener('click', () => {
        addFriendModal.style.display = 'none';
    });

    // 点击模态框外部关闭
    window.addEventListener('click', (e) => {
        if (e.target === addFriendModal) {
            addFriendModal.style.display = 'none';
        }
    });

    // 切换标签页
    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // 移除所有标签页和按钮的激活状态
            tabBtns.forEach(b => b.classList.remove('active'));
            tabContents.forEach(c => c.classList.remove('active'));

            // 添加当前标签页和按钮的激活状态
            btn.classList.add('active');
            const tabId = btn.getAttribute('data-tab');
            document.getElementById(`${tabId}-tab`).classList.add('active');
        });
    });

    // 搜索用户
    searchBtn.addEventListener('click', () => {
        const keyword = searchInput.value.trim();
        if (keyword === '') {
            alert('请输入用户昵称');
            return;
        }

        // 显示加载状态
        document.getElementById('searchResults').innerHTML = '<div class="loading">正在搜索...</div>';

        // 模拟搜索请求
        setTimeout(() => {
            searchUsers(keyword);
        }, 800);
    });

    // 获取随机推荐用户
    randomBtn.addEventListener('click', () => {
        // 显示加载状态
        document.getElementById('randomResults').innerHTML = '<div class="loading">正在获取推荐用户...</div>';

        // 模拟请求
        setTimeout(() => {
            getRandomUsers();
        }, 1000);
    });

    // 获取共同好友推荐
    mutualBtn.addEventListener('click', () => {
        // 显示加载状态
        document.getElementById('mutualResults').innerHTML = '<div class="loading">正在获取共同好友推荐...</div>';

        // 模拟请求
        setTimeout(() => {
            getMutualFriends();
        }, 1200);
    });

    // 模拟搜索用户
    function searchUsers(keyword) {
        // 这里应该是AJAX请求后端接口，获取搜索结果
        // 模拟搜索结果
        const results = [
            { id: 101, nickname: '张小明', avatar: 'https://picsum.photos/id/1005/200/200', mutualCount: 3 },
            { id: 102, nickname: '李小华', avatar: 'https://picsum.photos/id/1012/200/200', mutualCount: 5 },
            { id: 103, nickname: '王大锤', avatar: 'https://picsum.photos/id/1025/200/200', mutualCount: 1 }
        ].filter(user => user.nickname.includes(keyword));

        displayUserResults(results, 'searchResults');
    }

    // 模拟获取随机推荐用户
    function getRandomUsers() {
        // 这里应该是AJAX请求后端接口，获取随机推荐用户
        // 模拟随机推荐用户
        const results = [
            { id: 104, nickname: '赵小花', avatar: 'https://picsum.photos/id/1027/200/200', mutualCount: 2 },
            { id: 105, nickname: '周小伟', avatar: 'https://picsum.photos/id/1028/200/200', mutualCount: 0 },
            { id: 106, nickname: '吴小宇', avatar: 'https://picsum.photos/id/1074/200/200', mutualCount: 4 }
        ];

        displayUserResults(results, 'randomResults');
    }

    // 模拟获取共同好友推荐
    function getMutualFriends() {
        // 这里应该是AJAX请求后端接口，获取共同好友推荐
        // 模拟共同好友推荐
        const results = [
            { id: 107, nickname: '郑小红', avatar: 'https://picsum.photos/id/1062/200/200', mutualCount: 3 },
            { id: 108, nickname: '孙小亮', avatar: 'https://picsum.photos/id/1074/200/200', mutualCount: 2 },
            { id: 109, nickname: '钱小雨', avatar: 'https://picsum.photos/id/1066/200/200', mutualCount: 5 }
        ];

        displayUserResults(results, 'mutualResults');
    }

    // 显示用户结果
    function displayUserResults(results, containerId) {
        const container = document.getElementById(containerId);

        if (results.length === 0) {
            container.innerHTML = '<div class="loading">没有找到匹配的用户</div>';
            return;
        }

        let html = '';
        results.forEach(user => {
            html += `
                <div class="user-item">
                    <img src="${user.avatar}" alt="${user.nickname}的头像" class="user-item-avatar">
                    <div class="user-item-info">
                        <div class="user-item-name">${user.nickname}</div>
<div class="user-item-mutual">
    ${user.mutualCount > 0 ? '共同好友: ' + user.mutualCount + '位' : '暂无共同好友'}
</div>
                    </div>
                    <button class="add-friend-btn" onclick="sendFriendRequest(${user.id}, this)">添加好友</button>
                </div>
            `;
        });

        container.innerHTML = html;
    }

    // 发送好友请求
    function sendFriendRequest(userId, btn) {
        // 这里应该是AJAX请求后端接口，发送好友请求
        btn.disabled = true;
        btn.textContent = '已发送';

        // 模拟请求
        setTimeout(() => {
            alert('好友请求已发送！');
        }, 500);
    }
</script>

</body>
</html>